"use client";
import style from "./page.module.scss";
import { getOtherVideo, getSubject, getType, getUserById } from "@/api";
import { useEffect, useState } from "react";
import CategoryBar from "@/components/CategoryBar";
import { List, message, Modal } from "antd";
import PrimaryList from "@/components/List";
import { useRouter } from "next/navigation";
import TextArea from "antd/es/input/TextArea";
export type TCourses = {
  id: number;
  subjectId: string;
  videoName: string;
  videoLink: string;
  videoStatus: number;
  cause: string;
  richText?: string;
};
export interface TVideoData {
  id: number;
  subjectId: number;
  userId: number;
  subjectName: string;
  subjectHead: string;
  subjectType: string;
  subjectDescription: string;
  subjectIsApply: number;
  createTime: string;
  updateTime: string;
  cause: string;
  userApplyStatus?: string;
  authorId?: number;
  //审核状态
  subjectStatus: number;
  videoList: TCourses[];
  richText?: string;
}
export default function Course() {
  const [videoData, setVideoData] = useState<string[]>([]);
  const [listData, setListData] = useState([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [total, setTotal] = useState(0);
  const [data, setData] = useState<TVideoData[]>([]);
  const [typeName, setTypeName] = useState<string | null>(null);
  const [applyModalOpen, setApplyModalOpen] = useState(false);
  const [textArea, setTextArea] = useState("");
  const [subjectId, setSubjectId] = useState(0);
  const router = useRouter();
  const getVideo = async (pageNum: number = 1, pageSize: number = 10) => {
    const res = await getSubject({
      pageNum,
      pageSize,
      subjectName: "",
    });
    const videoArr = res.data.data.records;
    setTotal(videoArr.length);
    setData(videoArr);
    await getUserDetail(videoArr);
    setLoading(false);
  };
  const getUserDetail = async (id: number) => {
    await getUserById({ id });
  };
  const handleClick = (
    subjectId: number,
    userApplyStatus?: string,
    subjectIsApply?: number,
    e?: any
  ) => {
    e.stopPropagation();
    userApplyStatus === "1" || subjectIsApply === 1
      ? router.push(`/VedioContentView?videoId=${subjectId}`)
      : message.info("申请通过后才能观看哦~");
  };
  const handleApply = async (e: any, id: number) => {
    e.stopPropagation();
    setApplyModalOpen(true);
    setSubjectId(id);
  };
  const getVideoType = async () => {
    const res = await getType({ differ: "video", pageNum: 1, pageSize: 100 });
    if (res.data.data.records.length <= 11) {
      const newData = res.data.data.records.map((item: any) => item.typeName);
      setVideoData(newData);
    } else {
      const newData = res.data.data.records
        .slice(0, 11)
        .map((item: any) => item.typeName);
      newData.push("更多");

      const newListData = res.data.data.records
        .slice(11)
        .map((item: any) => item.typeName);
      setVideoData(newData);
      setListData(newListData);
    }
  };
  // 分类筛选
  const handleClickData = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    setTypeName(e.currentTarget.textContent);
  };
  const handleClickList = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    setTypeName(e.currentTarget.textContent);
  };
  // 提交申请
  const repplyConfirm = async () => {
    const res = await getOtherVideo({ subjectId, applyCause: textArea });
    res.data.code === 200 && message.success("您的申请已提交，请耐心等待审核");
    setApplyModalOpen(false);
    setTextArea("");
  };
  const repplyCancel = () => {
    setApplyModalOpen(false);
    setTextArea("");
  };
  const repplyCauseChange = (e: any) => {
    setTextArea(e.target.value);
  };
  useEffect(() => {
    getVideoType();
  }, []);
  return (
    <div className={style["courseContainer"]}>
      <div className={style["carouselContainer"]}>
        <CategoryBar
          content={
            <List
              size="small"
              dataSource={listData}
              renderItem={(item: any, index: number) => (
                <List.Item
                  key={"list_" + index}
                  onClick={(e) => handleClickList(e)}
                >
                  {item}
                </List.Item>
              )}
              className={style["list"]}
            />
          }
          data={videoData}
          className={style["barCss"]}
          onClick={(e) => handleClickData(e)}
        />
      </div>
      <div className={style["center"]}>
        <div className={style["content"]}>
          {/* 课程列表 */}
          <div className={style["courseBar"]}>
            <div className={style["meta"]}>
              <PrimaryList
                typeName={typeName}
                getList={getVideo}
                vedioData={data}
                loading={loading}
                total={total}
                handleClick={handleClick}
                isShowStatus={false}
                handleApply={handleApply}
              />
            </div>
          </div>
        </div>
      </div>
      <Modal
        open={applyModalOpen}
        okText="确定"
        cancelText="取消"
        title="申请原因"
        onOk={repplyConfirm}
        onCancel={repplyCancel}
      >
        <TextArea
          rows={4}
          placeholder="请输入申请原因"
          value={textArea}
          onChange={repplyCauseChange}
        />
      </Modal>
      <footer></footer>
    </div>
  );
}
